import { Component, Input, Output, EventEmitter } from '@angular/core';
import { EChartOption } from 'echarts';
// import 'echarts-gl';

@Component({
  selector: 'app-charts',
  template: `
    <div echarts
      class="app-charts"
      [options]="options"
      [merge]="merge"
      [loading]="loading"
      [autoResize]="autoResize"
      [initOpts]="initOpts"
      [theme]="theme"
      [loadingOpts]="loadingOpts"
      (chartClick)="onChartClick($event)"
      (chartDataZoom)="onChartDataZoom($event)"
    ></div>
    <ng-content></ng-content>
  `
})

export class ChartsComponent {

  private _options: EChartOption;

  @Input()
  set options(val: EChartOption) {
    this._options = val;
  }

  get options(): EChartOption {
    return this._options;
  }

  @Input() merge = null;

  @Input() loading = false;

  @Input() autoResize = true;

  @Input() initOpts = null;

  @Input() theme = null;

  @Input() loadingOpts = null;

  @Output() chartClick: EventEmitter<any> = new EventEmitter<any>();

  @Output() chartDataZoom: EventEmitter<any> = new EventEmitter<any>();

  onChartClick(event: any) {
    this.chartClick.emit(event);
  }

  onChartDataZoom(event: any) {
    this.chartDataZoom.emit(event);
  }
}
